<template>
	<view class="detail-view">
		<view class="top-bar">
			<uni-navbar :fixed="true" :back="true" color="#fff" title="内容详情"></uni-navbar>
		</view>


		<view class="formView">
			<view class="formViewItem">
				<view class="formViewItemLeft">
					标题
				</view>
				<view class="formViewItemRight">
					{{ issueInfo.title ? issueInfo.title : '无' }}
				</view>
			</view>
			
			<view class="formViewItem">
				<view class="formViewItemLeft">
					议题来源
				</view>
				<view class="formViewItemRight">
					{{ issueInfo.isSourceName ? issueInfo.isSourceName : '无' }}
				</view>
			</view>
			
			<view class="formViewItem">
				<view class="formViewItemLeft">
					议题提交时间
				</view>
				<view class="formViewItemRight">
					{{ issueInfo.submitTime ? issueInfo.submitTime : '无' }}
				</view>
			</view>
			
			<view class="formViewItem">
				<view class="formViewItemLeft">
					议题分类
				</view>
				<view class="formViewItemRight">
					{{ issueInfo.classifyName ? issueInfo.classifyName : '无' }}
				</view>
			</view>
			
			<view class="formViewItem">
				<view class="formViewItemLeft">
					议题分类明细
				</view>
				<view class="formViewItemRight">
					{{ issueInfo.classifyDetailName ? issueInfo.classifyDetailName : '无' }}
				</view>
			</view>


			<u-gap height="20" bgColor="#F6F7FB"></u-gap>


			<view class="formViewItem">
				<view class="formViewItemLeft">
					提交人
				</view>
				<view class="formViewItemRight">
					{{ issueInfo.submitName ? issueInfo.submitName : '无' }}
				</view>
			</view>
			
			<view class="formViewItem">
				<view class="formViewItemLeft">
					联系电话
				</view>
				<view class="formViewItemRight">
					{{ issueInfo.phone ? issueInfo.phone : '无' }}
				</view>
			</view>
			
			<view class="formViewItem">
				<view class="formViewItemLeft">
					所属代表之家
				</view>
				<view class="formViewItemRight">
					{{ issueInfo.dbzjDeptName ? issueInfo.dbzjDeptName : '无' }}
				</view>
			</view>
			
			<view class="formViewItem">
				<view class="formViewItemLeft">
					定位地址
				</view>
				<view class="formViewItemRight">
					{{ issueInfo.addr ? issueInfo.addr : '无' }}
				</view>
			</view>
			
			<view class="formViewItem">
				<view class="formViewItemLeft">
					详细位置
				</view>
				<view class="formViewItemRight">
					{{ issueInfo.addrDetail ? issueInfo.addrDetail : '无' }}
				</view>
			</view>
			
			<view class="formViewItem">
				<view class="formViewItemLeft">
					议题负责人
				</view>
				<view class="formViewItemRight">
					<text v-for="(item,index) of issueChargePepList">{{ index == '0' ? item.userName : ',' + item.userName }}</text>
				</view>
			</view>
			
			<view class="formViewItem">
				<view class="formViewItemLeft">
					议题参与代表
				</view>
				<view class="formViewItemRight" v-if="issuePartPepList.length !== 0">
					<text v-for="(item,index) of issuePartPepList">{{ index == '0' ? item.userName : ',' + item.userName}}</text>
				</view>
				
				<view class="formViewItemRight" v-else>
					<text>无</text>
				</view>
			</view>

			<view class="textA">
				{{ issueInfo.content ? issueInfo.content : '无' }}
			</view>

			<view style="background-color: #FFFFFF;width: 100%;padding: 20upx 28upx;" class="">
				<view class="fileList2">
					<view class="fileList2Item" v-for="(item,index) of fileList_Info"
						@tap="$showLine(item)">
						<view class="fileList2ItemLeft">
							<image src="@/pagesB/static/doc.png" mode=""></image>
						</view>
						<view class="fileList2ItemCenter">
							<view class="">
								{{ item.name }}
							</view>
			
							<view class="" style="display: flex;align-items: center;">
								<view class="" style="flex: 1;color: #999999;font-size: 12px;padding-top: 10upx;">
									{{ item.size }}
								</view>
			
								<view class="" style="flex: 1;text-align: right;color: #0077FF;font-size: 12px;">
									预览
								</view>
							</view>
						</view>
						<!-- <view class="fileList2ItemRight" @tap="toDelete(index,'file')">
							预览
						</view> -->
					</view>
				</view>
			</view>

			<u-gap height="20" bgColor="#F6F7FB"></u-gap>
			
			<view class="histList">
				<view class="histListItem">
					<view class="histListItemTop" @tap="ytscShow = !ytscShow ">
						<view class="intitle histListItemTopLeft">
							议题审查
						</view>
						<view class="histListItemTopRight">
							<u-icon :name="!ytscShow ? 'arrow-down' : 'arrow-up'" color="#000000" size="28"></u-icon>
						</view>
					</view>
					
					<view class="histListItemCenter" v-if="ytscShow">
						
						<view class="formViewItem">
							<view class="formViewItemLeft">
								审查主体
							</view>
							<view class="formViewItemRight">
								{{ issueAudit.auditUserName}}
							</view>
						</view>
						
						<view class="formViewItem">
							<view class="formViewItemLeft">
								审查时间
							</view>
							<view class="formViewItemRight">
								{{ issueAudit.auditTime}}
							</view>
						</view>
						
						<view class="formViewItem">
							<view class="formViewItemLeft">
								审查结果
							</view>
							<view class="formViewItemRight">
								{{ issueAudit.auditStatus == '1' ? '通过' : '不通过' }}
							</view>
						</view>
						
						
						<view class="formViewItem" v-if="issueAudit.auditStatus !== '1'">
							<view class="formViewItemLeft">
								退回理由
							</view>
							<view class="formViewItemRight">
								{{ issueAudit.auditOpinion ? issueAudit.auditOpinion : '无' }}
							</view>
						</view>
					</view>
				</view>
				
				<u-gap height="20" bgColor="#F6F7FB"></u-gap>
				
				
				<view class="histListItem">
					<view class="histListItemTop" @tap="ytgkShow = !ytgkShow">
						<view class="intitle histListItemTopLeft">
							码上留言
						</view>
						<view class="histListItemTopRight">
							<u-icon :name="!ytgkShow ? 'arrow-down' : 'arrow-down'" color="#000000" size="28"></u-icon>
						</view>
					</view>
					
					<view class="histListItemCenter" v-if="ytgkShow">
						<view class="formViewItem">
							<view class="formViewItemLeft">
								审查主体
							</view>
							<view class="formViewItemRight">
								{{ msIssueOpen.auditUserName }}
							</view>
						</view>
						
						<view class="formViewItem">
							<view class="formViewItemLeft">
								审查时间
							</view>
							<view class="formViewItemRight">
								{{ msIssueOpen.auditTime }}
							</view>
						</view>
						
						<view class="formViewItem">
							<view class="formViewItemLeft">
								审查结果
							</view>
							<view class="formViewItemRight">
								{{ msIssueOpen.auditStatus == 1 ? '通过' : '不通过' }}
							</view>
						</view>
						
						<view class="formViewItem">
							<view class="formViewItemLeft">
								公开时间
							</view>
							<view class="formViewItemRight">
								{{ msIssueOpen.openStart + '至' + msIssueOpen.openEnd }}
							</view>
						</view>
						
						<!-- <view class="formViewItem">
							<view class="formViewItemLeft">
								公开范围
							</view>
							<view class="formViewItemRight">
								{{ msIssueOpen.openDbzjName }}
							</view>
						</view> -->
					</view>
				</view>
			</view>
			
			<u-gap height="20" bgColor="#F6F7FB"></u-gap>
			
			<view class="histListEdit" v-if="type == 'sqdy'">
				<view class="histListItem">
					<view class="histListItemTop">
						<view class="intitle histListItemTopLeft">
							议前调研
						</view>
						<view class="histListItemTopRight">
							<u-icon name="arrow-down" color="#000000" size="28"></u-icon>
						</view>
					</view>
					
					<view class="histListItemCenter">
						
						<view class="formViewItem">
							<view class="formViewItemLeft2">
								调研开始时间<text class="" style="color: red;">*</text>
							</view>
							<view class="formViewItemRight">
								<view class="">
									<date-time-picker placeholder="请选择" fields="day" @change="timeChange($event, 'surveyStart')">
									</date-time-picker>
								</view>
							</view>
						</view>
						
						<view class="formViewItem">
							<view class="formViewItemLeft2">
								调研结束时间<text class="" style="color: red;">*</text>
							</view>
							<view class="formViewItemRight">
								<view class="">
									<date-time-picker placeholder="请选择" fields="day" @change="timeChange($event, 'surveyEnd')">
									</date-time-picker>
								</view>
							</view>
						</view>
						
						<!-- <view class="formViewItem">
							<view class="formViewItemLeft2">
								调研人员<text class="" style="color: red;">*</text>
							</view>
							<view v-if="sqdyQuery.surveyMebArr.length == 0" class="formViewItemRight" @tap="showPicker">
								
								<image src="@/pagesB/static/tjry.png" mode=""></image>
							</view>
							<view v-if="sqdyQuery.surveyMebArr.length !== 0" class="" @tap="showPicker">
								<text v-for="(item,index) of sqdyQuery.surveyMebArr">{{ index == 0 ? item.userName : ',' + item.userName }}</text>
							</view>
						</view> -->
						
						<view class="fiexd-btm">
							<u-button class="form-btn" type="error" @click="sqdyBtn">提交</u-button>
						</view>
						
					</view>
				</view>
			</view>


			<view class="fiexd-btm" v-if="type == 'jsgk'">
				<u-button class="form-btn" type="error" @click="jsgkBtn">结束公开</u-button>
			</view>

		</view>
		
		
		<ba-tree-picker ref="treePicker" :multiple='true' :selectParent="false" @search="searchTap" @typeTap="typeTap" @select-change="selectChange" title="选择人员"
			:localdata="zbList" valueKey="id" textKey="title" childrenKey="children" />
	</view>
</template>

<script>
	import baTreePicker from "@/components/ba-tree-picker/ba-tree-picker.vue";
	import uniParse from '@/components/uni-parse/parse.vue';
	import dateTimePicker from '@/components/uni-datetime-picker';
	import {
		mapState
	} from 'vuex';
	export default {
		components: {
			uniParse,
			baTreePicker,
			dateTimePicker
		},
		data() {
			return {
				issuePartPepList:[],
				issueChargePepList:[],
				zbList:[],
				id: '',
				type:'jsgk',
				ytscShow:false,
				ytgkShow:false,
				fileList_Info: [],
				issueAudit: {},
				issueInfo: {},
				msIssueCmt: [],
				msIssueConsult: {},
				msIssueDisclosure: {},
				msIssueLike: [],
				msIssueOpen: {},
				msIssueSurvey: {},
				clientCode: '',
				userId: '',
				sqdyQuery:{
					issueSurvey:{
						issueId:'',
						surveyStart:'',
						surveyEnd:'',
						surveyMeb:'',
					},
					surveyMebArr:[]
				}
			};
		},
		onLoad(option) {
			this.loadLogin()
			
			if (option.type) {
				this.type = option.type
			}
			
			if (option.id) {
				this.id = option.id
				this.getD()
			}
			
			this.loadTeam('','dbzj')
		},
		onHide() {},
		onUnload() {},
		computed: {
			...mapState(['userInfo'])
		},
		methods: {
			// 显示选择器
			showPicker() {
				this.loadTeam('','dbzj')
				this.$refs.treePicker._show();
			},
			typeTap(e){
				if(e == '1'){
					this.loadTeam('','dbzj')
				}
				
				if(e == '2'){
					this.loadTeam('','dbjb')
				}
				
				if(e == '3'){
					this.zbList = []
				}
			},
			loadTeam(name,type) {
				this.$request('/system/sys-user/tree_users', {
					clientCode: '370782',
					currentUserId: this.userId,
					name:name ? name : '',
					teamType: type
				}).then((res) => {
					this.zbList = res.data;
					// this.waihotsList = res.data;
				});
			},
			searchTap(e,v){
				if(v == ''){
					this.zbList = []
				}else{
					this.$request('/system/sys-user/tree_users', {
						clientCode: '370782',
						currentUserId: this.userId,
						name:v ? v : '',
						teamType: e
					}).then((res) => {
						let a = []
						let aa = []
						if(res.data[0].children){
							if(res.data[0].children[0].children){
								a.push(res.data[0].children[0])
							}else{
								
							}
							if(res.data[0].children[1].children){
								a.push(res.data[0].children[1])
							}else{
								
							}
							if(a.length == 0){
								this.zbList = []
							}else{
								aa = res.data
								aa[0].children = a
								this.zbList = aa
							}
						}else{
							this.zbList = []
						}
						// this.zbList = res.data;
					});
				}
				
				
			},
			jsgkBtn(){
				let that = this
				let a = {
					issueId:this.id,
					currentUserId:this.userId
				}
				let url = '/msIssueInfo/openEnd';
				this.$request(url, a , {
					load: true
				}).then((res) => {
					if (res.code == 200) {
						that.$msg('结束公开成功')
						setTimeout(() => {
							uni.navigateBack({
								delta: 1
							})
						}, 500)
					}
				});
			},
			sqdyBtn(){
				let that = this
				let a = JSON.parse(JSON.stringify(this.sqdyQuery))
				
					if(this.sqdyQuery.issueSurvey.surveyStart == ''){
						this.$msg('请选择调研开始时间')
						return
					}
					
					if(this.sqdyQuery.issueSurvey.surveyEnd == ''){
						this.$msg('请选择调研结束时间')
						return
					}
					
					// if(this.sqdyQuery.surveyMebArr.length == 0){
					// 	this.$msg('请选择调研人员')
					// 	return
					// }
					
					
					let url = '/msIssueInfo/addSurvey';
					a.issueSurvey.issueId = this.id
					a.issueSurvey.auditUser = this.userId
					a.issueSurvey.currentUserId = this.userId
					a.currentUserId = this.userId
					this.$request(url, a , {
						load: true
					}).then((res) => {
						if (res.code == 200) {
							that.$msg('提交成功')
							setTimeout(() => {
								uni.navigateBack({
									delta: 1
								})
							}, 500)
						}
					});
			},
			//监听选择（ids为数组）
			selectChange(ids, names) {
				let namesList = names.split(',')
				let a = []
				ids.map((item,index) => {
					let aQ = {
						userId:item,
						userName:namesList[index],
					}
					a.push(aQ)
				})
				this.sqdyQuery.surveyMebArr = a
			},
			timeChange({
				date,
				dt
			}, idx) {
				this.sqdyQuery.issueSurvey[idx] = date.year + '-' + date.month2 + '-' + date.day2
			},
			loadLogin() {
				if (this.userInfo.sysUser) {
					this.clientCode = this.userInfo.sysUser.clientCode;
					this.userId = this.userInfo.sysUser.id;
				} else {
					this.$logout();
				}
			},
			getD() {
				let that = this
				let url = '/msIssueInfo/queryAll';
				this.$request(url, {
					id: that.id,
					clientCode: "370782"
				}, {
					load: true
				}).then((res) => {
					this.fileList_Info = res.data.fileList_Info
					this.issueAudit = res.data.issueAudit
					this.issueInfo = res.data.issueInfo
					this.msIssueCmt = res.data.msIssueCmt
					this.msIssueConsult = res.data.msIssueConsult
					this.msIssueDisclosure = res.data.msIssueDisclosure
					this.msIssueLike = res.data.msIssueLike
					this.msIssueOpen = res.data.msIssueOpen
					this.msIssueSurvey = res.data.msIssueSurvey
					
					this.issuePartPepList = res.data.issuePartPepList
					this.issueChargePepList = res.data.issueChargePepList
				});
			}
		} 
	};
</script>

<style lang="scss" scoped>
	.detail-view {
		background-color: #ffffff;
		min-height: 100vh;
	}

	.formView {
		.formViewItem {
			display: flex;
			align-items: center;
			height: 120upx;
			padding: 0 40upx;
			border-bottom: 1upx solid #F6F7FB;

			.formViewItemLeft {
				flex: 1;
				text-align: left;
				color: #999999;
				font-size: 17px;
			}
			
			.formViewItemLeft2 {
				display: flex;
				flex: 1;
				text-align: left;
				color: #000000;
				font-size: 17px;
			}
			
			.formViewItemRight {
				flex: 1.5;
				text-align: right;
				color: #333333;
				font-size: 17px;
				
				image{
					position: relative;
					left: 280upx;
					width: 48upx;
					height: 48upx;
				}
			}
		}

		.textA {
			padding: 20upx 40upx;
			font-size: 17px;
			color: #333333;
			word-break: break-word;
		}
	}


	.fileList2 {
		padding: 0 40upx;
		background-color: #F6F7FB;

		.fileList2Item {
			display: flex;
			align-items: center;
			height: 100upx;
			padding: 10upx 0;

			.fileList2ItemLeft {
				flex: 1;
				text-align: left;
				padding: 0 10upx 0 0;

				image {
					width: 44upx;
					height: 52upx;
				}
			}

			.fileList2ItemCenter {
				padding: 0 0 0 0;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
				flex: 7;
				font-size: 15px;
				color: #333333;
			}

			.fileList2ItemRight {
				flex: 1;
				text-align: right;

				image {
					width: 32upx;
					height: 32upx;
					position: relative;
					left: 30upx;
				}
			}
		}

		.fileListItemAudio {
			display: flex;
			align-items: center;
			width: 120upx;
			height: 60upx;
			background-color: #0077FF;

			.fileListItemAudioLeft {
				flex: 1;

				.fileListItemAudioLeftImg {
					width: 24upx;
					height: 24upx;
				}
			}
		}
	}

	.intitle {
		height: 100upx;
		line-height: 100upx;
		padding: 0 40upx;
		color: #333333;
		font-size: 17px;
		font-weight: bold;
	}
	
	.fiexd-btm {
		position: static;
		padding: 30rpx;
	}
	
	
	.histList{
		.histListItem{
			.histListItemTop{
				display: flex;
				align-items: center;
				.histListItemTopLeft{
					flex: 1;
					text-align: left;
				}
				
				.histListItemTopRight{
					flex: 1;
					text-align: right;
					padding-right: 40upx;
				}
			}
		}
	}
	
	.histListEdit{
		.histListItem{
			.histListItemTop{
				display: flex;
				align-items: center;
				.histListItemTopLeft{
					flex: 1;
					text-align: left;
				}
				
				.histListItemTopRight{
					flex: 1;
					text-align: right;
					padding-right: 40upx;
				}
			}
		}
	}
	
	.fileAdd{
		padding-left: 40upx;
		.fileAddTop{
			width: 120upx;
			height: 120upx;
			text-align: center;
			background-color: #F6F7FB;
			font-size: 26px;
			color: #999999;
			line-height: 120upx;
		}
		
		.fileAddText{
			font-size: 14px;
			color: #666666;
		}
	}
</style>
